<!-- 歌手信息页面 -->
<template>
  <div>
    <div v-if="!singles.name" class="loading">
      <van-loading color="#1989fa" size="50px" />
    </div>
    <div v-else class="artist artist-android">
      <div class="header">
        <van-icon name="arrow-left" size="20" @click="$router.back()" />
      </div>
      <div class="hd">
        <img class="cover" :src="singles.picUrl" alt="" />
        <div class="artist-info">
          <p class="name">
            {{ singles.name }}
            <span v-if="singles.trans">（{{ singles.trans }}）</span>
          </p>
          <p class="rank" v-if="ranking">歌手榜{{ region(ranking.type) }}地区 No.{{ ranking.rank }}</p>
          <div class="simple">
            <p class="nickname" v-if="user && user.nickname">
              昵称：{{ user.nickname }}
              <i class="vip-icon" v-if="user.vipType"></i>
              <i class="package-icon" v-if="user.anchor"></i>
            </p>
            <p class="follow">
              <span v-if="artist.identifyTag">
                <span class="followCnt">
                  关注
                  <span class="count">{{ follows.followCnt }}</span>
                </span>
                |
              </span>
              <span class="fansCnt" :style="follows.followCnt ? '' : 'margin-left: 0px;'">
                粉丝
                <span class="cout">{{ num(follows.fansCnt) }}</span>
              </span>
            </p>
            <p class="identities-area" v-if="artist.identifyTag || (artist.identities && artist.identities.length)">
              <span class="identifyTag" v-for="item in artist.identifyTag" :key="item">{{ item }}</span>
              <span class="identities" v-for="item in artist.identities" :key="item">{{ item }}</span>
            </p>
          </div>
        </div>
      </div>
      <h2>歌手简介</h2>
      <div class="intro">
        <p :class="hide ? 'f-thide3 hide' : 'f-thide3'">
          {{ singles.briefDesc }}
        </p>
        <div class="full" @click="open" v-if="singles.briefDesc.length > 72">
          {{ hide ? '完整歌手介绍' : '收起' }}
          <i :class="hide ? 'arrow' : 'arrow arrow-up'"></i>
        </div>
      </div>
      <span>
        <h2 class="mgt8">热门单曲</h2>
        <div class="hot-song">
          <HitSongList :songlist="list.slice(0, 5)"></HitSongList>
        </div>
        <router-link v-if="getRecentDay <= time(album.publishTime) && album" :to="`/albumart?id=${album.id}`">
          <h2 class="mgt8">最新音乐</h2>
          <div class="album-info">
            <div class="album-cover" :style="`background-image: url(${album.blurPicUrl});`"></div>
            <div class="album-other">
              <p class="album-name">{{ album.name }}</p>
              <p class="album-artist-name">{{ singer(album.artists) }}</p>
              <p class="album-songs">
                <span>{{ album.size }}首</span>
                <span class="date">{{ time(album.publishTime) }}</span>
              </p>
            </div>
          </div>
        </router-link>
      </span>
    </div>
  </div>
</template>

<script setup name="singerDetails">
import { ref, computed, onMounted } from "vue";
import { useRoute } from 'vue-router'
import HitSongList from '@/components/HitSongList.vue'
import { albumArtistsAPI, artistAPI, followAPI, singleAPI } from '@/api'
import { filterTime, numberFormat, getRecentDay_Date } from '@/utils/common'
import { singer as computedSinger } from '@/utils/dedicated'

const route = useRoute()
let id = route.query.id // 歌手id
let hide = ref(true) // 展示
let singles = ref([]) // 歌曲信息
let artist = ref({}) // 入驻艺人
let follows = ref({}) // 歌手粉丝数量
let list = ref([]) // 歌曲列表
let ranking = ref({}) // 排名
let user = ref('') // 昵称
let album = ref({}) // 专辑信息

// 数字格式化
let num = computed(() => {
  return (val) => {
    return numberFormat(val)
  }
})

// 时间格式化
let time = computed(() => {
  return (val) => {
    return filterTime(val)
  }
})

// 名字格式化
let singer = computed(computedSinger)

// 判断地区榜单
let region = computed(() => {
  return (val) => {
    switch (val) {
      case 1:
        return '华语'
      case 2:
        return '欧美'
      case 3:
        return '韩国'
      case 4:
        return '日本'
    }
  }
})

// 一个月前的日期
let getRecentDay = computed(() => {
  return getRecentDay_Date(-30)
})

onMounted(async () => {
  await getData()
  await albumArtists()
})

// 歌手简介展示
function open() {
  hide.value = !hide.value
}
// 歌曲信息
function getData() {
  singleAPI(id).then((res) => {
    singles.value = res.data.artist
    list.value = res.data.hotSongs
  })
  // 歌手信息
  artistAPI(id).then((res) => {
    artist.value = res.data.data.artist
    ranking.value = res.data.data.artist.rank
    user.value = res.data.data?.user
  })
  // 歌手粉丝数量
  followAPI(id).then((res) => {
    follows.value = res.data.data
  })
}
// 专辑信息
function albumArtists() {
  albumArtistsAPI(id).then((res) => {
    album.value = res.data.hotAlbums[0]
  })
}
</script>

<style lang="scss" scoped>
.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%);
}

.artist {
  background-color: #fcfcfd;

  .header {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 100;
    color: #fff;
  }

  .hd {
    position: relative;
    padding-top: 82.9%;

    .cover {
      position: absolute;
      top: 0;
      width: 100%;
    }
  }

  .hd:after {
    position: absolute;
    top: 0;
    content: '';
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    height: 100%;
    left: 0;
  }

  .artist-info {
    position: absolute;
    left: 16px;
    bottom: 30px;
    color: #fff;
    z-index: 2;

    .name {
      font-size: 20px;
      line-height: 20px;
    }

    .rank {
      margin-top: 15px;
      font-size: 13px;
    }

    .simple {
      margin-top: 15px;
      opacity: 0.8;
      font-size: 12px;
      line-height: 12px;
    }

    .vip-icon {
      display: inline-block;
      width: 22px;
      height: 12px;
      background: url('../assets/vip/vip.png');
      background-size: cover;
      margin-left: 4px;
      vertical-align: bottom;
    }

    .package-icon {
      display: inline-block;
      width: 22px;
      height: 12px;
      background: url('../assets/vip/song.png');
      background-size: contain;
      background-repeat: no-repeat;
      margin-left: 8px;
      vertical-align: bottom;
    }

    .follow {
      height: 12px;
      margin-top: 10px;
    }

    .followCnt {
      margin-right: 10px;
      font-size: 13px;
    }

    .identities-area {
      height: 12px;
      margin-top: 10px;
    }

    .identifyTag {
      margin-right: 4px;
    }

    .identities {
      border: 1px solid #fff;
      border-radius: 4px;
      padding: 2px;
      transform: scale(0.7);
      display: inline-block;
      opacity: 0.6;
      margin-left: -4px;
    }

    .count {
      margin-left: 4px;
    }

    .fansCnt {
      font-size: 13px;
      margin-left: 10px;
    }

    p {
      margin: 0;
    }
  }

  h2 {
    font-size: 17px;
    position: relative;
    z-index: 2;
    margin-top: -5px;
    padding: 15px;
    background: #fff;
    font-weight: 700;
    margin-bottom: 0;
  }

  .intro {
    background: #fff;
    padding: 0 16px 18px;

    .f-thide3 {
      color: #666;
      font-size: 14px;
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }

    .hide {
      -webkit-line-clamp: 3;
    }
  }

  .full {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-top: 25px;
  }

  .arrow {
    display: inline-block;
    position: relative;
    width: 9px;
    height: 9px;
    background: url('../assets/img/v.png');
    background-size: contain;
    background-repeat: no-repeat;
    left: 4px;
    top: 0;
  }

  .arrow-up {
    transform: rotate(180deg);
    width: 12px;
    height: 12px;
    top: 2px;
  }

  .mgt8 {
    margin-top: 8px;
    color: #333;
  }

  .hot-song {
    position: relative;
    padding: 0 10px 0 0;
    background: #fff;
    min-height: 100px;
  }
}

.album-info {
  position: relative;
  display: flex;
  height: 80px;
  background: #fff;
  padding: 0 15px 20px;
  align-items: center;

  .album-cover {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    background-size: cover;
    margin-right: 25px;
  }

  .album-cover:after {
    position: absolute;
    content: '';
    width: 90px;
    height: 100%;
    background: url('../assets/home/album.png') 100% no-repeat;
    background-size: contain;
    background-repeat: no-repeat;
    right: -10px;
  }

  .album-name {
    font-size: 15px;
    color: #333;
  }

  .album-artist-name {
    font-size: 13px;
    color: #888;
  }

  .album-songs {
    margin-top: 10px;
    font-size: 13px;
    color: #888;
  }

  .date {
    margin-left: 4px;
  }
}
</style>
